<template>
  <div class="home">
    <Layout :style="{padding: '0 24px 24px'}">
      <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>会员管理</BreadcrumbItem>
        <BreadcrumbItem  :to="{path: '/Member'}">我的会员</BreadcrumbItem>
        <BreadcrumbItem :to="{path: '/Usersedlist'}">红包列表</BreadcrumbItem>
        <BreadcrumbItem>扫码记录</BreadcrumbItem>
      </Breadcrumb>
      <Content :style="{padding: '24px 182px 24px 24px', minHeight: this.$h.GetContentBodyHeight()+'px', background: '#fff'}">
        <Table :loading="loading_" border :columns="columns7" :data="Redbao" stripe></Table>
        <Page :total="total" :page-size="pagesize" @on-change="changpage" show-total/>
      </Content>
    </Layout>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    props: {

    },
    components: {},
    data() {
      return {
        loading_:false,
        total:0,//数据总条数
        pagesize:10,//每页条数
        columns7: [
          {
            title: '扫码用户',
            key: 'name',
            width: 350,
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                  }
                }),
                h('strong', params.row.name)
              ]);
            }
          },
          {
            title: '获取金额',
            key: 'money',
            // width: 200,
          },
          {
            title: '扫码时间',
            key: 'created_at',
          },
        ],
        Alldata:[],
        Redbao:[],
      }
    },
    methods: {

      Processingdata() { //数据处理
        this.Alldata = this.GetSaoMaList;
        this.total=this.GetSaoMaList.length;//数据总条数
        this.Redbao = this.GetSaoMaList.slice(0, this.pagesize);
      },
      changpage(page){  //点击分页
        this.Redbao = this.Alldata.slice((page - 1) * this.pagesize, page * this.pagesize)
      },
    },
    watch: {},
    computed: {
      ...mapGetters([
        'GetSaoMaList',
      ]),
    },
    created() {

    },
    mounted() {
      this.Processingdata();
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }
</style>
